<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <template #default>
          <div>
            <span>后台管理系统</span>
            <span class="avator">
              <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                 <el-avatar> {{ loginUser }} </el-avatar>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logOut"><el-icon><unlock /></el-icon>注销</el-dropdown-item>
                  <el-dropdown-item><el-icon><setting /></el-icon>设置</el-dropdown-item>
                  <el-dropdown-item><el-icon><edit-pen /></el-icon>修改密码</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            </span>
          </div>
        </template>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu :default-active="curPath" :unique-opened="true">
              <template v-for="(item, mainIndex) in menuList" :key="mainIndex + ''">
                <router-link :to="item.path" v-if="!item.children">
                  <el-menu-item :index="item.path">
                    <el-icon :size="20">
                      <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.name }}</span>
                  </el-menu-item>
                </router-link>
                <el-sub-menu :index="item.path" v-else>
                  <template #title>
                    <el-icon :size="20">
                      <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.name }}</span>
                  </template>
                  <router-link
                      :to="item.path + '/' + subItem.path"
                      v-for="(subItem, subIndex) in item.children"
                      :key="subIndex + ''">
                    <el-menu-item :index="item.path + '/' + subItem.path" v-if="!subItem.hidden">
                      <el-icon :size="20">
                        <component :is="subItem.icon" />
                      </el-icon>
                      <span>{{ subItem.name }}</span>
                    </el-menu-item>
                  </router-link>
                </el-sub-menu>
              </template>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <div>
            <div class="content-title-box">
              <el-breadcrumb separator=">">
                <template v-for="(item, index) in breadList">
                  <el-breadcrumb-item
                      v-if="item.name"
                      :key="index"
                      :to="item.path">{{ item.name }}</el-breadcrumb-item>
                </template>
              </el-breadcrumb>
            </div>
            <div class="content-container-box">
              <div class="content">
                <router-view></router-view>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup lang="ts">
//获取全局发送请求的对象
import {getCurrentInstance, onMounted, reactive, ref, toRefs, watch} from "vue";
import {ElMessage} from "element-plus";
import {routes} from "@/router/router";
import {onBeforeRouteUpdate, RouteLocationMatched, useRoute, useRouter} from "vue-router";

const http = getCurrentInstance()?.appContext.config.globalProperties.$http

// -----------响应式数据部分开始----------
// 定义路由对象
const state = reactive({
  curPath: '',
  menuList: [] as any[],
  breadList: [] as any[]
})

// 获取登录的用户名对象
const loginUser = ref('')

const { breadList, curPath, menuList } = toRefs(state)
// 编程式路由对象
const router = useRouter()
const route = useRoute()

// -----------响应式数据部分结束----------

// -----------方法部分开始----------

// 初始化当前路由
const init = () => {
  state.curPath = route.fullPath
  if (routes[2].children) {
    state.menuList = routes[2]?.children
  }
}

// 获取当前路由的路径
const getBreadList = () => {
  state.breadList = route.matched
}

// 注销
const logOut = () => {
  localStorage.removeItem('token')
  router.replace('/')
}


// -----------方法部分结束----------

onMounted(() => {
  init()
  onBeforeRouteUpdate(to => {
    state.curPath = to.path
  });
  getBreadList()
  const token = localStorage.getItem('token')
  if (token) {
    const user = JSON.parse(token)
    loginUser.value = user.username
  }
})


watch(route, (to, from) => {
  state.breadList = route.matched
})

</script>

<style scoped>
.common-layout {
  padding: 0!important;
  margin: 0!important;
  width: 100%;
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-header {
  background-color: #1e90ff;
  color: #fff;
  font-size: 24px;
  line-height: 60px;
}

.avator {
  float: right;
  padding: 10px;
}

.el-dropdown-link {
  color: #fff;
}

.el-aside {
  color: #333;
  text-align: center;
  background-color: #c6e2ff;
  height: 100%;
}

.el-main {
  color: #333;
}

.el-menu {
  background-color: #c6e2ff;
}

.content-container-box {
  margin-top: 10px;
}

a {
  text-decoration: none;
}
</style>
